<template>
  <div class="shopCarBox">
    <!-- 轮播 -->
    <div class="myBox">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#39a9ed">
        <van-swipe-item v-for="(item,i) in OneGoodsLunbo" :key="i">
          <van-image :src="item.src" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 商品介绍 -->
    <div class="myBox">
      <van-panel :title="currentGoodsDetail.title">
        <div class="goodsDetailPrice">
          市场价：
          <del>{{currentGoodsDetail.market_price}}</del>销售价
          <span>￥{{currentGoodsDetail.sell_price}}</span>
          <div class="buy_num">
            <i>购买数量</i>
            <van-stepper
              v-model="buy_num"
              integer
              input-width="40px"
              button-size="30px"
              @change="buyNumChanged"
            />
          </div>
        </div>
        <van-button type="info" size="small" class="buyNow">立即购买</van-button>
        <van-button type="danger" size="small" @click="addShopCar(currentGoodsDetail.id)">加入购物车</van-button>
      </van-panel>
    </div>
    <!-- 商品介绍 -->
    <div class="myBox">
      <van-panel title="商品参数">
        <div class="goodsDetailPrice">
          <div class="paramsBox">
            <p>商品货号：{{currentGoodsDetail.goods_no}}</p>
            <p>库存情况：{{currentGoodsDetail.stock_quantity}}</p>
            <p>上架时间：{{currentGoodsDetail.add_time}}</p>
          </div>
        </div>
        <div class="pramsBtns">
          <button @click="tuwenjieshao">图文介绍</button>
          <button @click="sppl">商品评论</button>
        </div>
      </van-panel>
    </div>
  </div>
</template>
<script>
//引入vuex的state数据
import { mapState, mapMutations } from "vuex"; 
export default {
  data() {
    return {
      // 当前商品基本信息
      currentGoodsDetail: "",
      //当前商品的购买数量
      buy_num: 1,
      //   当前商品的轮播图数据
      OneGoodsLunbo: []
    };
  },
  created() {
    this.getLoadId();
    this.getGoodsDetail();
    this.getOneGoodsLunbo();
  },
  methods: {
    ...mapMutations(["addToCar","setCar",'initCar','setCurrentGoodsId']),
    //获取当前商品的id
    getLoadId(){
        const result = JSON.parse(window.sessionStorage.getItem('CurrentGoodsId'))
        console.log(result);
        
        this.setCurrentGoodsId(result);
    },
    //获取当前访问的商品详情
    async getGoodsDetail() {
        console.log(this.$route.params.id);
        
      const res = await this.$axios.get(
        `/api/goods/getinfo/${this.CurrentGoodsId}`
      );
      if (res.status !== 200) return alert("获取信息失败");
      //   this.$notify({
      //       type:'success',
      //       message:'获取成功'
      //   })
      this.currentGoodsDetail = res.data.message[0];
      console.log(this.currentGoodsDetail);
    },
    // 获取当前商品的轮播图数据
    async getOneGoodsLunbo() {
      const res = await this.$axios.get(
        `/api/getthumimages/${this.CurrentGoodsId}`
      );
      if (res.status !== 200)
        return this.$notify({
          type: "danger",
          message: "商品图片信息获取失败"
        });
      this.OneGoodsLunbo = res.data.message;
    },
    buyNumChanged() {
      console.log("change");
    },
    //加入购物车
    addShopCar() {
      const result = JSON.parse(window.localStorage.getItem("car"));
      //判断在localStorage是否有car的值
      // 如果有就设置，没有就创建
      if (result) {
        //有就设置vuex里的car属性
        // 通过商品id 检查car里是否已经有 如果有就修改count属性 没有就push进去
        const i = result.findIndex(
          item => item.id === this.currentGoodsDetail.id
        );
        console.log("在本地中找到了，索引为", i);
        if (i === -1) {
          // 没有就push进vuex的car数组里 并且上传到本地
          this.addToCar({
            id: this.currentGoodsDetail.id,
            count: this.buy_num,
            price: this.currentGoodsDetail.sell_price,
            selected: true
          });
        }else{
            this.initCar(result);
            this.setCar({
                id:this.currentGoodsDetail.id,
                count:this.buy_num,
                isAdd:true
            })
        }
      } else {
        // 没有就push进vuex的car数组里 并且上传到本地
        this.addToCar({
          id: this.currentGoodsDetail.id,
          count: this.buy_num,
          price: this.currentGoodsDetail.sell_price,
          selected: true
        });
      }
      this.$notify({
            type:'success',
            message:'添加成功'
        })
    },
    // 图文介绍
    tuwenjieshao() {
      this.$router.push(`/goodsdesc/${this.CurrentGoodsId}`)
    },
    // 商品评论
    sppl() {
      this.$router.push(`/goodscomments/${this.CurrentGoodsId}`)
    }
  },
  computed: {
    // 展开vuex里的state数据
    ...mapState(["CurrentGoodsId", "car"])
  }
};
</script>
<style scoped lang="less">
.myBox{
  margin-top: 40px;
}
//清除一些恶不必要的模板样式
.van-cell:not(:last-child)::after {
  border: none;
}
[class*="van-hairline"]::after {
  border: none;
}
.van-panel__content {
  padding-left: 20px;
}
.van-cell__title {
  border-bottom: 1px solid #ccc;
  font-size: 20px;
  padding-bottom: 10px;
}
.goodsDetailPrice {
  font-size: 15px;
  color: #8f8f94;
  span {
    font-size: 20px;
    color: red;
    font-weight: 700;
  }
  .buy_num {
    margin: 10px 0!important;
    line-height: 30px;
    height: 50px;
    display: flex;
    align-items: center;
  }
}
.van-stepper {
  display: inline;
  margin: 0 10px 0 10px;
}
.buyNow {
  margin-right: 10px;
  // top: 20px;
  // display:block;
}
.paramsBox {
  margin-bottom: 10px;
  border-bottom: 1px solid #ccc;
  margin-right: 20px;
  p {
    line-height: 30px;
  }
}
.pramsBtns {
  margin-bottom: 10px;
  margin-right: 20px;
  button {
    width: 100%;
    height: 35px;
    background-color: transparent;
    box-shadow: none;
    border: 1px solid #1989fa;
    margin-top: 10px;
    border-radius: 5px;
    color: #1989fa;
  }
  :nth-child(2) {
    color: red;
    border: 1px solid red;
  }
}
.my-swipe .van-swipe-item {
  color: #39a9ed;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #fff;
}
.shopCarBox{
  padding-bottom: 60px;
}
.shopCarBox .van-button{
  width: 100px;
}
</style>